<template>
    <div class="productDet">
        <!-- 轮播图 -->
        <mt-swipe :auto="4000" class="lt-lbt">
            <mt-swipe-item v-for="item in result.pic" :key="item.id">
                <a href="javascript:;"><img :src="'http://127.0.0.1:3000'+item.picAddr"></a>
            </mt-swipe-item>
        </mt-swipe>
        <p class="proName">{{this.result.proName}}</p>
        <hr>
        <p class="price">
            <span>价格:</span>
            <span class="newPrice">￥{{this.result.price}}</span>
            <del>{{this.result.oldPrice}}</del>
        </p>
        <hr>
        <div class="size">尺码:
            <span v-for="value in sizeArr" :key="value">{{value}}</span>
        </div>
        <hr>
        <div class="p_number">
            数量：
            <span class="jian" @click="downNum">-</span><input type="text" :value="value">
            <span class="jia" @click="upNum">+</span>
            剩余：{{this.result.num}} 件
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { productDetail } from '@/api/index'
export default {
  data () {
    return {
      result: {},
      sizeArr: [],
      value: 0
    }
  },
  mounted () {
    this.$store.state.title = '商品详情'
    var id = this.$route.query.id
    productDetail(id).then(res => {
      console.log(res)
      this.result = res
      this.temp = res.size.split('-')
      for (let i = this.temp[0]; i <= this.temp[this.temp.length - 1]; i++) {
        this.sizeArr.push(i)
      }
    })
  },
  methods: {
    downNum () {
      if (this.value === 0) {
        Toast({
          message: '不能再减了',
          position: 'bottom',
          duration: 5000
        })
        return false
      }
      this.value--
    },
    upNum () {
      if (this.value === this.result.num) {
        Toast({
          message: '家里有矿也不能买这么多',
          position: 'bottom',
          duration: 5000
        })
        return false
      }
      this.value++
    }
  }
}
</script>

<style lang='scss' scoped>
.productDet {
  height: 100%;
  overflow: scroll;
  .lt-lbt {
    width: 100%;
    height: 354px;
    img {
      width: 100%;
      display: block;
    }
  }
  .proName {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .price {
    padding: 10px;
    .newPrice {
      color: red;
      font-size: 24px;
      font-weight: 600;
    }
  }
  .size {
    padding: 10px 5px;
    span {
      width: 28px;
      height: 28px;
      line-height: 28px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      border: 1px solid #ccc;
      vertical-align: middle;
      margin-bottom: 10px;
      margin-right: 5px;
    }
  }
  .p_number {
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    .jian,
    .jia {
      width: 28px;
      height: 28px;
      line-height: 28px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      border: 1px solid #ccc;
      vertical-align: middle;
    }
    input {
      width: 28px;
      height: 28px;
      line-height: 28px;
      display: inline-block;
      border-radius: 0;
      border: none;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      margin: 0;
      padding: 0;
      vertical-align: middle;
      text-align: center;
    }
  }
}
</style>
